<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>创建考试</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../js/jquery.min.js"></script>
    <script src="../layui/layui.js"></script>
    <style>
        .chooseexampaper,
        .chooseclasses,
        .choosestudent {
            display: none;
            width: 700px;
            height: 650px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 60%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9997;
            transform: translate(-50%, -50%);
        }

        .bgone,
        .bgtwo,
        .bgthree {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }

        a {
            text-decoration: none;
            color: #000000;
        }

        .chooseexampaper-title,
        .chooseclasses-title,
        .choosestudent-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        }

        .chooseexampaper-title span,
        .chooseclasses-title span,
        .choosestudent-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>创建考试</legend>
</fieldset>
<div style="margin:10px 10px">
    <div>
        <button type="button" class="layui-btn">创建考试</button>
        <button type="button" id="managerExam" class="layui-btn">管理考试</button>
    </div>
    <hr>
    <!-- *************创建试卷表单********************* -->
    <form class="layui-form">

        <div class="layui-form-item">
            <label class="layui-form-label">考试名称</label>
            <div class="layui-input-inline">
                <input type="text" name="exam_title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">题库</label>
            <div class="layui-input-inline layui-form" lay-filter="course_name">
                <select id="course_name" lay-filter="coures" lay-verify="required"></select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">设置试卷</label>
            <div class="layui-input-inline">
                <input type="text" id="setexampaper" name="title" lay-verify="title" autocomplete="off"
                       placeholder="请选择试卷" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">试卷总分</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="100分"
                       class="layui-input" style="width: 70%;">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">及格分数</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="60分"
                       class="layui-input" style="width: 70%;">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">考试时长</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="120分钟"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="beginTime" placeholder="开始时间">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="endTime" placeholder="结束时间">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">考试对象</label>
            <div class="layui-input-block">
                <!--********** 添加班级组********* -->
                <button type="button" id="addclass" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">
                    <i class="layui-icon"></i>添加对象组
                </button>
                <br>
                <span class="layui-input-block" id="group"></span>

                <br><br>
                <br><br>


                <%-- <table class="layui-table" lay-filter="addGroup" id="addStudentClass" style="width: 90%;">
                     <thead>
                     <tr>
                         <th>学院名称</th>
                         <th>专业名称</th>
                         <th>班级名称</th>
                         <th>班级人数</th>
                         <th>操作（删除）</th>
                     </tr>
                     </thead>
                     <tbody id="demoList">
                     <tr>
                         <td>信息科学与工程学院</td>
                         <td>计算机科学与技术</td>
                         <td>17计算机科学与技术一班</td>
                         <td>38</td>
                         <td>
                             <button type="button" class="layui-btn layui-btn-xs layui-btn-normal">删除</button>
                         </td>
                     </tr>
                     </tbody>
                 </table>
                 <script type="text/html" id="delBtn">
                     <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
                 </script>--%>

                <!-- *********添加考生********* -->
                <button type="button" id="addstudent" class="layui-btn layui-btn-sm layui-btn-normal"
                        lay-event="add">
                    <i class="layui-icon"></i>添加考生
                </button>
                <table class="layui-table" style="width: 90%;">
                    <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>班级名称</th>
                        <th>专业名称</th>
                        <th>操作（删除）</th>
                    </tr>
                    </thead>
                    <tbody id="demoList">
                    <tr>
                        <td>100003</td>
                        <td>dunny</td>
                        <td>17计算机科学与技术一班</td>
                        <td>计算机科学与技术</td>
                        <td>
                            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
            </div>
        </div>

    </form>
    <!-- *********************************设置试卷选择弹出层*********************************** -->
    <div id="chooseexampaper" class="chooseexampaper" style="width: 1200px; height: 800px; margin-top: 20px">
        <div id="titleone" class="chooseexampaper-title">选取试题
            <span><a id="closeBtn" href="javascript:void(0);" class="closeone">关闭</a></span>
        </div>
        <hr>
        <div class="chooseexampaper-input-content" style="margin: 5px 5px;">
            <label for="" style="color: rgb(158, 158, 158);">从下面的列表里选取试卷</label>
            <div class="demoTable">
                搜索考试类别：
                <div class="layui-inline">
                    <input class="layui-input" name="id" id="demoReload" autocomplete="off" lay-filter="demoReload">
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
            <table class="layui-hide" id="examShows" lay-filter="user"></table>
            <hr>
            <table class="layui-hide" id="exampaper" lay-filter="exampaper"></table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
            </script>
        </div>
    </div>
    <!-- 第一个遮盖层 -->
    <div id="bgone" class="bgone"></div>

    <!-- *********************************添加班级组弹出层*********************************** -->
    <div id="chooseclasses" class="chooseclasses" style="width: 1000px; height: 800px; margin-top: 10px">
        <div id="titletwo" class="chooseclasses-title">选取班级
            <span><a id="closeBtn" href="javascript:void(0);" class="closetwo">关闭</a></span>
        </div>
        <hr>
        <div class="chooseclasses-input-content" style="margin: 5px 5px;">
            <div class="demoTable">
                院系：
                <div class="layui-inline">
                    <%--  这里要改成 院系列表的渲染 --%>
                    <input class="layui-input" name="id" id="deptReload" autocomplete="off">
                </div>
                <button class="layui-btn" id="searchClass" data-type="reload">搜索</button>
            </div>

            <table class="layui-hide" id="deptMajorClass" lay-filter="studentClass"></table>

            <script type="text/html" id="addBtn">
                <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
            </script>

            <hr>


        </div>
    </div>
    <!-- 第二个遮盖层 -->
    <div id="bgtwo" class="bgtwo"></div>

    <!-- *********************************添加考生弹出层*********************************** -->
    <div id="choosestudent" class="choosestudent" style="width: 800px;">
        <div id="titlethree" class="choosestudent-title">选取考生
            <span><a id="closeBtn" href="javascript:void(0);" class="closethree">关闭</a></span>
        </div>
        <hr>
        <div class="choosestudent-input-content" style="margin: 5px 5px;">
            <label for="" style="color: rgb(158, 158, 158);">从下面的列表里选取参考班级</label>
            <div style="margin-top: 20px;">
                <form class="layui-form layui-form-pane" method="POST" action="">
                    <!-- 三级联动  还没有设置 -->
                    <div class="layui-inline" style="margin-right: 20px;">
                        <div class="layui-input-inline">
                            <select name="academy" lay-filter="academy">
                                <option value="">请选择院系</option>
                                <option value="0">院系1</option>
                                <option value="1">院系2</option>
                                <option value="2">院系3</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-right: 20px;">
                        <div class="layui-input-inline">
                            <select name="classes" lay-filter="classes">
                                <option value="">请选择专业</option>
                                <option value="0">专业1</option>
                                <option value="1">专业2</option>
                                <option value="2">专业3</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-right: 20px;">
                        <div class="layui-input-inline">
                            <select name="classes" lay-filter="classes">
                                <option value="">请选择班级</option>
                                <option value="0">1班</option>
                                <option value="1">2班</option>
                                <option value="2">3班</option>
                            </select>
                        </div>
                    </div>
                    <button type="button" class="layui-btn">搜索</button>
                </form>
            </div>
            <!-- 表单 -->
            <hr>
            <!-- 表格 -->
            <form class="layui-form layui-form-pane" method="POST" action="">
                <table class="layui-table" lay-size="sm">
                    <thead>
                    <tr>
                        <th><input type="checkbox" id="checkall" lay-skin="primary"></th>
                        <th>学生学号</th>
                        <th>学生姓名</th>
                        <th>所在班级</th>
                        <th>所属院系</th>
                        <th>操作（添加人数）</th>
                    </tr>
                    </thead>
                    <tbody id="choosequestion-tbody">
                    <tr>
                        <td><input type="checkbox" lay-skin="primary"></td>
                        <td>100001</td>
                        <td>aimee</td>
                        <td>17计算机科学与技术一班</td>
                        <td>信息科学与工程学院</td>
                        <td>
                            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal">添加</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div id="page3"></div>
                <button type="button" class="layui-btn layui-btn-normal">批量导入</button>
            </form>

        </div>
    </div>
    <!-- 第三个遮盖层 -->
    <div id="bgthree" class="bgthree"></div>
</div>
</body>

<script>
    layui.use(['element', 'form', 'layedit', 'laydate', 'laypage', 'laypage', 'layer', 'table'], function () {
        var $ = layui.jquery,
            element = layui.element, //Tab的切换功能，切换事件监听等，需要依赖element模块
            form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate,
            table = layui.table,
            laypage = layui.laypage;

        // 动态渲染科目的下拉框选项
        $.ajax({
            url: "/OnlineExam/admin/course?m=showCourseNames",
            success: function (result) {
                console.log(result);
                var names = $.parseJSON(result);
                var option = '';
                console.log(names.length);
                for (let i = 0; i < names.length; i++) {
                    console.log(names[i])
                    option += "<option value='" + names[i] + "'>" + names[i] + "</option>";

                    $("#course_name").html("");
                    $("#course_name").append(option);
                    form.render('select', 'course_name');
                }
            }
        });

        laypage.render({ //分页
            elem: 'page1',
            count: 100,
            theme: '#1E9FFF'
        });
        laypage.render({ //分页
            elem: 'page2',
            count: 100,
            theme: '#1E9FFF'
        });
        laypage.render({ //分页
            elem: 'page3',
            count: 100,
            theme: '#1E9FFF'
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#beginTime' //指定元素
        });
        laydate.render({
            elem: '#endTime' //指定元素
        });

        $('#managerExam').click(function (event) {
            console.log('clickManager')
        });


        // ************************弹出层*************************8
        var setexampaper = document.querySelector("#setexampaper");
        var addclass = document.querySelector("#addclass");
        var addstudent = document.querySelector("#addstudent");
        console.log(addclass);
        console.log(addstudent);
        var chooseexampaper = document.querySelector("#chooseexampaper");
        var chooseclasses = document.querySelector("#chooseclasses");
        var choosestudent = document.querySelector("#choosestudent");

        var bgone = document.querySelector(".bgone");
        var bgtwo = document.querySelector(".bgtwo");
        var bgthree = document.querySelector(".bgthree");
        var closeone = document.querySelector(".closeone");
        var closetwo = document.querySelector(".closetwo");
        var closethree = document.querySelector(".closethree");
        var titleone = document.querySelector("#titleone");
        var titletwo = document.querySelector("#titletwo");
        var titlethree = document.querySelector("#titlethree");

        // 设置试卷
        setexampaper.onclick = function () {
            chooseexampaper.style.display = 'block';
            bgone.style.display = 'block';

            // 渲染试卷列表
            table.render({
                elem: '#examShows',
                url: '/OnlineExam/admin/exampaper?m=showExams',
                cols: [[
                    {type: 'checkbox', fixed: 'left', width: '3%'},
                    {field: 'exampaper_id', title: '试卷ID', fixed: 'center', width: '7%'},
                    {field: 'exampaper_name', fixed: 'center', title: '试卷名称', width: '20%'},
                    {field: 'course_name', fixed: 'center', title: '试卷类别', width: '10%'},
                    {field: 'user_name', fixed: 'center', title: '创建人', width: '7%'},
                    {field: 'create_time', fixed: 'center', title: '创建时间', width: '10%'},
                    {field: 'exampaper_desc', fixed: 'center', title: '试卷描述', width: '28%'},
                    {fixed: 'center', title: '操作', toolbar: '#barDemo', width: '15%'}
                ]],
                id: 'testReload',
                page: true
            });

            // 对试卷列表进行重载，但是目前这个功能有待完善，
            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');

                    console.log(demoReload);

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            key: {
                                course_name: demoReload.val()
                            }
                        }
                    }, 'data');
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //监听行工具事件，点击添加按钮即可将试卷设置为本次考试的试题
            table.on('tool(user)', function (obj) {
                console.log(obj);
                var exampaper_id = obj.data.exampaper_id;
                var exampaper_name = obj.data.exampaper_name;
                var course_name = obj.data.course_name;

                // 删除题目
                if (obj.event === 'add') {
                    $('#setexampaper').val(exampaper_name);
                    chooseexampaper.style.display = 'none';
                    bgone.style.display = 'none';
                }
            });

            // 设置试卷
            // 动态渲染题库的下拉框选项
            $.ajax/*({
                url: "/OnlineExam/admin/course?m=showCourseNames",
                success: function (result) {
                    console.log(result);
                    var names = $.parseJSON(result);
                    var option = '';
                    console.log(names.length);
                    for (let i = 0; i < names.length; i++) {
                        console.log(names[i])
                        option += "<option value='" + names[i] + "'>" + names[i] + "</option>";

                        $("#sub_name").html("");
                        $("#sub_name").append(option);
                        form.render('select', 'sub_name');
                    }
                }
            });*/

            // 根据题库搜索 题目 然后添加到 试卷中
            /*$('#courseSearch').click(function (event) {
                var course = document.getElementById("sub_name");
                var c_index = course.selectedIndex;
                var courseValue = course.options[c_index].value;
                console.log(courseValue);
                // 渲染搜索的下拉框
                $.ajax({
                    url: "/OnlineExam/admin/question?m=",
                    success: function (result) {
                        console.log(result);
                        var names = $.parseJSON(result);
                        var option = '';
                        console.log(names.length);
                        for (let i = 0; i < names.length; i++) {
                            console.log(names[i])
                            option += "<option value='" + names[i] + "'>" + names[i] + "</option>";

                            $("#sub_name").html("");
                            $("#sub_name").append(option);
                            form.render('select', 'sub_name');
                        }
                    }
                })



            });*/

        }

        /**
         * 添加班级
         */
        addclass.onclick = function () {
            console.log('添加班级组')
            chooseclasses.style.display = 'block';
            bgtwo.style.display = 'block';

            //方法级渲染
            table.render({
                elem: '#deptMajorClass',
                url: '/OnlineExam/admin/exampaper?m=showClassDept',
                cols: [[
                    {checkbox: true, fixed: true, width: '5%'}
                    , {field: 'class_id', title: '班级ID', width: '10%', fixed: true}
                    , {field: 'academy_name', title: '院系', width: '20%'}
                    , {field: 'major_name', title: '专业', width: '20%'}
                    , {field: 'class_name', title: '班级', width: '20%'}
                    , {field: 'class_pnum', title: '人数', width: '10%'}
                    , {title: '操作', toolbar: '#addBtn', width: '15%'}
                ]]
                , id: 'studentClassDept'
                , page: true
            });

            var $ = layui.$, active = {
                reload: function () {
                    var deptReload = $('#deptReload');

                    //执行重载
                    table.reload('studentClassDept', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: {
                            key: {
                                id: deptReload.val()
                            }
                        }
                    }, 'data');
                }
            };

            $('#searchClass').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            // 点击 添加按钮事件
            //监听行工具事件，点击添加按钮即可将试卷设置为本次考试的试题
            table.on('tool(studentClass)', function (obj) {
                console.log(obj);
                var class_id = obj.data.class_id;
                var academy_name = obj.data.academy_name;
                var major_name = obj.data.major_name;
                var class_name = obj.data.class_name;
                var class_pnum = obj.data.class_pnum;
                var datas = obj.data;

                // 添加对象到 考试中
                if (obj.event === 'add') {

                    /*table.render({
                        elem: '#addStudentClass',
                        data: datas,
                        cols: [[
                            {checkbox: true, fixed: true, width: '5%'}
                            , {field: 'class_id', title: '班级ID', width: '10%', fixed: true}
                            , {field: 'academy_name', title: '院系', width: '20%'}
                            , {field: 'major_name', title: '专业', width: '20%'}
                            , {field: 'class_name', title: '班级', width: '20%'}
                            , {field: 'class_pnum', title: '人数', width: '10%'}
                            , {title: '操作', toolbar: '#delBtn', width: '15%'}
                        ]]
                        , id: 'studentClassDept'
                        , page: true
                    });*/


                    var span = "<br><span value ='" + class_name + "' border='1px'>" + class_name + "</span><br>";
                    $("#group").after(span);

                    chooseclasses.style.display = 'none';
                    bgtwo.style.display = 'none';
                }
            });
        }


        /**
         * 添加院校
         */
        addstudent.onclick = function () {
            console.log('添加学生')
            choosestudent.style.display = 'block';
            bgthree.style.display = 'block';
        }

        // for(var i=0;i<checkbutton.length;i++){//查看按钮事件
        //     checkbutton[i].onclick=function(i){
        //         var dataid=$(this).attr("dataid");//取出题目的id
        //         checkcontent.style.display='block';
        //        bgtwo.style.display = 'block';
        //        console.log(dataid);
        //     }
        // }
        // checkbutton.onclick = function () {
        //     checkcontent.style.display = 'block';
        //     bgtwo.style.display = 'block';
        // }
        closeone.onclick = function () {
            chooseexampaper.style.display = 'none';
            bgone.style.display = 'none';
        }
        closetwo.onclick = function () {
            chooseclasses.style.display = 'none';
            bgtwo.style.display = 'none';
        }
        closethree.onclick = function () {
            choosestudent.style.display = 'none';
            bgthree.style.display = 'none';
        }

        titleone.addEventListener('mousedown', function (e) {
            var x = e.pageX - chooseexampaper.offsetLeft;
            var y = e.pageY - chooseexampaper.offsetTop;
            //（2）当鼠标移动时，把鼠标的页面中坐标减去  鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                chooseexampaper.style.left = e.pageX - x + "px";
                chooseexampaper.style.top = e.pageY - y + "px";
            }

            //（3）鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            })
        })
        titletwo.addEventListener('mousedown', function (e) {
            var x = e.pageX - chooseclasses.offsetLeft;
            var y = e.pageY - chooseclasses.offsetTop;
            //（2）当鼠标移动时，把鼠标的页面中坐标减去  鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                chooseclasses.style.left = e.pageX - x + "px";
                chooseclasses.style.top = e.pageY - y + "px";
            }

            //（3）鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            })
        })
        titlethree.addEventListener('mousedown', function (e) {
            var x = e.pageX - choosestudent.offsetLeft;
            var y = e.pageY - choosestudent.offsetTop;
            //（2）当鼠标移动时，把鼠标的页面中坐标减去  鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                choosestudent.style.left = e.pageX - x + "px";
                choosestudent.style.top = e.pageY - y + "px";
            }

            //（3）鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            })
        })
    });
</script>
</html>
